<template>
  <div>
    <!-- <div class="search">
      <a-input-search
        placeholder="请输入客户编号/名称"
        enter-button="搜索"
        size="large"
        @search="onSearch"
      />
    </div> -->
    <!-- 添加弹出框 -->
    <a-card>
      <div :class="advanced ? 'search' : null">
        <a-form layout="horizontal">
          <div :class="advanced ? null : 'fold'">
            <a-row>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="规则编号"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-input placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="使用状态"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-select placeholder="请选择">
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="调用次数"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-input-number style="width: 100%" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="更新日期"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-date-picker
                    style="width: 100%"
                    placeholder="请输入更新日期"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="使用状态"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-select placeholder="请选择">
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="描述"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                >
                  <a-input placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <span style="float: right; margin-top: 3px">
            <a-button type="primary">查询</a-button>
            <a-button style="margin-left: 8px">重置</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{ advanced ? "收起" : "展开" }}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </span>
        </a-form>
      </div>
    </a-card>

    <!-- 多选删除按钮 -->
    <div style="margin-bottom: 10px" class="btn1">
      <a-button type="primary" @click="showModal" class="btn1"> 添加 </a-button>
      <a-button
        class="btn"
        type="danger"
        :disabled="!hasSelected"
        :loading="loading"
        @click="start"
      >
        删除
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `已选中 ${selectedRowKeys.length} 条数据` }}
        </template>
      </span>
    </div>
    <!--/ 多选删除按钮 -->
    <!-- rowKey="_rowIndex" -->
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :data-source="data"
      :rowKey="(record) => record._rowIndex"
      :pagination="false"
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" />联系人</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="scope">
        <a-space>
          <a-button
            type="primary"
            @click="modify(scope.cCusCode)"
            v-if="scope.id != 2"
          >
            修改
          </a-button>
        </a-space>
      </span>
    </a-table>
    <div>
      <a-pagination
        v-model="current"
        showSizeChanger:true
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
        @change="getChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <!-- <button @click="get(props)">11122121</button> -->
          <!-- <span v-if="props.value === ''">全部</span> -->
        </template>
      </a-pagination>
    </div>
    <!-- 编辑弹窗 -->
    <a-modal
      width="50%"
      title="Title"
      :visible="visible1"
      :confirm-loading="confirmLoading"
      @ok="handleOk1"
      @cancel="handleCancel1"
    >
      <a-form>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户编码"
            >
              <a-input
                v-model="addForm.code"
                placeholder="请输入您的客户编码"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户地址："
            >
              <a-input v-model="addForm.address" placeholder="请输入客户地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="集团"
            >
              <a-input v-model="addForm.group" placeholder="请输入您的集团" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户名称："
            >
              <a-input
                v-model="addForm.customerName"
                placeholder="请输入客户名称"
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="联系人："
            >
              <a-input v-model="addForm.cName" placeholder="请输入联系人姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="联系电话："
            >
              <a-input v-model="addForm.cPhone" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="邮箱："
            >
              <a-input v-model="addForm.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- /编辑弹窗 -->
    <!-- 添加弹窗 -->
    <a-modal
      width="50%"
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form>
        <a-row>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户编码"
            >
              <a-input
                v-model="addForm.code"
                placeholder="请输入您的客户编码"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户地址："
            >
              <a-input v-model="addForm.address" placeholder="请输入客户地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="集团"
            >
              <a-input v-model="addForm.group" placeholder="请输入您的集团" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="客户名称："
            >
              <a-input
                v-model="addForm.customerName"
                placeholder="请输入客户名称"
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="联系人："
            >
              <a-input v-model="addForm.cName" placeholder="请输入联系人姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="联系电话："
            >
              <a-input v-model="addForm.cPhone" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="邮箱："
            >
              <a-input v-model="addForm.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- /添加弹窗 -->
  </div>
</template>

<script>
import { getCustomer, addCustomerData } from "../../services/dataSource";
export default {
  name: "sss",
  components: {},
  props: {},
  data() {
    return {
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      advanced: true, //控制展开的控制阀
      //   ModalText: "Content of the modal",
      visible: false, //添加按钮的弹框阀
      confirmLoading: false,
      visible1: false, //修改按钮的弹框阀
      confirmLoading1: false,
      //   分页
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50,
      //   表格数据
      columns: [
        {
          title: "客户编码",
          dataIndex: "cCusCode",
          key: "cCusCode",
          align: "center",
        },
        {
          dataIndex: "Contact",
          key: "Contact",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "name" },
          align: "center",
        },

        {
          title: "客户名称",
          dataIndex: "cName",
          key: "cName",
          align: "center",
        },
        {
          title: "联系电话",
          key: "cPhone",
          dataIndex: "cPhone",
          align: "center",
        },
        {
          title: "客户地址",
          key: "cAddress",
          dataIndex: "cAddress",
          align: "center",
        },
        // {
        //   title: "开户行",
        //   key: "cAddress",
        //   dataIndex: "cAddress",
        // align: "center",
        // },
        // {
        //   title: "开户账号",
        //   key: "cAddress",
        //   dataIndex: "cAddress",
        // align: "center",
        // },
        // {
        //   title: "税号",
        //   key: "cAddress",
        //   dataIndex: "cAddress",
        // align: "center",
        // },
        {
          title: "Email",
          key: "eMailAddress",
          dataIndex: "eMailAddress",
          align: "center",
        },
        //  {
        //   title: "销售人员",
        //   key: "eMailAddress",
        //   dataIndex: "eMailAddress",

        // align: "center",
        // },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [],
      addForm: {
        code: "", //编码
        customerName: "", //客户名称
        address: "", //客户地址
        group: "", //集团
        cName: "", //联系人姓名
        cPhone: "", //联系电话
        email: "", //邮箱
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      deleteId: [], //删除数据id
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  watch: {},
  methods: {
    // 多选功能
    start() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.deleteId = [];
      for (let i = 0; i < selectedRows.length; i++) {
        this.deleteId.push(selectedRows[i].cCusCode);
      }
    },

    // // 分页
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getData();
    }, // 页码值发生的变化
    getChange(pageNumber) {
      this.current = pageNumber;
      this.getData();
    },
    // //   搜索框
    // onSearch(value) {
    //   console.log(value);
    // },
    // 获取数据
    getData() {
      getCustomer(this.current, this.pageSize)
        .then((res) => {
          this.data = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加按钮
    showModal() {
      this.visible = true;
    },
    // 修改按钮
    modify(id) {
      this.visible1 = true;
    },
    // 修改按钮弹窗
    handleOk1(e) {
      // this.confirmLoading = true;
      this.visible1 = false;
    },
    handleCancel1(e) {
      this.visible1 = false;
    },
    // 添加按钮弹窗
    handleOk(e) {
      if (this.addForm.customerName == "") {
        return this.$message.info("请填写客户名称");
      }
      if (this.addForm.address == "") {
        return this.$message.info("请填写客户地址");
      }
      if (this.addForm.group == "") {
        return this.$message.info("请填写集团信息");
      }
      if (this.addForm.cName == "") {
        return this.$message.info("请填写联系人姓名");
      }
      if (this.addForm.cPhone == "") {
        return this.$message.info("请填写联系电话");
      }
      if (this.addForm.email == "") {
        return this.$message.info("请填写您的邮箱");
      }
      addCustomerData(
        this.addForm.address,
        this.addForm.customerName,
        this.addForm.group,
        this.addForm.cName,
        this.addForm.cPhone,
        this.addForm.email
      )
        .then((res) => {

          // if (res.data) {
          //   switch (res.data.status) {
          //     case 0:
          //       this.$message.info("保存成功");

          //       break;
          //     case 1:
          //       this.$message.info(`保存失败，${res.data.msg}`);
          //       break;
          //     default:
          //       this.$message.info("保存失败，未知状态。");
          //   }
          // } else {
          //   this.$message.info("保存失败,未知状态");
          // }
          this.getData();
        })
        .catch((err) => {
          console.log(err);
        });

      // this.confirmLoading = true;
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 1.25rem;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 1.125rem;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
.btn1 {
  margin-right: 1.25rem;
  margin-top: 0.3125rem;
}
.btn {
  margin-top: 0.3125rem;
}
</style>>

